<template>
	<div class="tool-bar-ri">
		<div class="header-icon">
			<AssemblySize v-if="themeConfig.assemblySize" id="assemblySize" />
			<Language v-if="themeConfig.language" id="language" />
			<SearchMenu v-if="themeConfig.searchMenu" id="searchMenu" />
			<ThemeSetting id="themeSetting" />
			<Message v-if="themeConfig.message" id="message" />
			<Fullscreen v-if="themeConfig.fullScreen" id="fullscreen" />
		</div>
		<span class="username">{{ name }}</span>
		<Avatar />
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import SearchMenu from './components/SearchMenu.vue'
import Fullscreen from './components/Fullscreen.vue'
import Message from './components/Message.vue'
import Language from './components/Language.vue'
import ThemeSetting from './components/ThemeSetting.vue'
import AssemblySize from './components/AssemblySize.vue'
import Avatar from './components/Avatar.vue'
import { GlobalStore } from '@/stores'

const globalStore = GlobalStore()

const name = computed(() => {
	return globalStore.userInfo.name
})

const themeConfig = computed(() => {
	return globalStore.themeConfig
})
</script>

<style scoped lang="scss">
.tool-bar-ri {
	display: flex;
	align-items: center;
	justify-content: center;

	// margin: 0 30px;
	.header-icon {
		display: flex;
		align-items: center;

		// justify-content: space-between;
		// width: 230px;
		padding-left: 20px;
		> * {
			margin-right: 20px;
		}
	}
	.username {
		margin: 0 20px 0 0;
		font-size: 15px;
	}
}
</style>
